<template>
    <a-layout>
        <Header/>
        <a-layout>
            <a-layout-sider width="200" style="background: #fff;height: calc(100vh - 64px - 70px)">
                <a-menu
                        :openKeys="openKeys"
                        v-model:selectedKeys="selectedKeys"
                        @openChange="onOpenChange"
                        mode="inline"
                        :style="{ height: '100%', borderRight: 0 }"
                >
                    <template v-for="(item,i) in menuList" :key="i">
                        <template v-if="!item.children">
                            <a-menu-item :key="'sub' + i">
                                <template #icon>
                                    <PieChartOutlined/>
                                </template>
                                <router-link :to="item.url">
                                    {{item.name}}
                                </router-link>
                            </a-menu-item>
                        </template>
                        <template v-else>
                            <sub-menu :key="item.id" :menu-info="item"/>
                        </template>
                    </template>
                </a-menu>
            </a-layout-sider>
            <a-layout>
                <router-view
                        style="padding: 0 24px;height: calc(100vh - 64px - 70px);overflow-y: scroll;overflow-x: hidden"/>
            </a-layout>
        </a-layout>
        <Footer/>
    </a-layout>
</template>

<script>
    import {defineComponent, reactive, toRefs, ref, onMounted} from 'vue';
    import {MenuFoldOutlined, MenuUnfoldOutlined, PieChartOutlined, MailOutlined} from '@ant-design/icons-vue';
    import Header from "@/components/Header.vue";
    import Footer from "@/components/Footer.vue";
    import axios from 'axios'
    import cookies from 'js-cookie'
    import {arrayToTree} from '../util/Tool.js'

    const SubMenu = {
        name: 'SubMenu',
        props: {
            menuInfo: {
                type: Object,
                default: () => ({}),
            },
        },
        template: `
                    <a-sub-menu :key="menuInfo.id">
                        <template #icon>
                            <MailOutlined/>
                        </template>
                        <template #title>
                            <router-link :to="menuInfo.url">{{menuInfo.name}}</router-link>
                        </template>
                        <template v-for="(item,i) in menuInfo.children" :key="i">
                            <template v-if="!item.children">
                                <a-menu-item :key="item.url">
                                    <template #icon>
                                        <PieChartOutlined/>
                                    </template>
                                    <router-link :to="item.url">{{item.name}}</router-link>
                                </a-menu-item>
                            </template>
                            <template v-else>
                                <sub-menu :menu-info="item" :key="item.id"/>
                            </template>
                        </template>
                    </a-sub-menu>
                `,
        components: {
            PieChartOutlined,
            MailOutlined,
        },
    };
    export default defineComponent({
        name: 'HomeView',
        components: {
            Footer,
            Header,
            'sub-menu': SubMenu,
            PieChartOutlined,

        },
        setup() {

            const menuList = ref([])
            const state = reactive({
                rootSubmenuKeys: [],
                openKeys: [],
                selectedKeys: [],
            });

            const onOpenChange = (openKeys) => {
                const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
                if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                    state.openKeys = openKeys;
                } else {
                    state.openKeys = latestOpenKey ? [latestOpenKey] : [];
                }
            };

            onMounted(() => {
                const loginUser = JSON.parse(cookies.get('user'))
                axios.get('sys-resource/queryByUserId/' + loginUser.id).then(rs => {
                    menuList.value = arrayToTree(rs.data.data, 0)
                    console.log("菜单", menuList.value)
                    state.openKeys = []
                    state.rootSubmenuKeys = []
                    state.openKeys.push(menuList.value[0].id)
                    menuList.value.forEach(val=>{
                        state.rootSubmenuKeys.push(val.id)
                    })
                })
            })

            return {
                ...toRefs(state),
                onOpenChange,
                menuList
            }
        }
    });
</script>
